<template>
    <div class="top-cpn">
        <span v-if="spanNumber == 1">一句诗词</span>
        <span v-else-if="spanNumber == 2">励志句子</span>
        <span v-else>毒鸡汤</span>
        <div class="liked">❤点赞
            <span v-if="spanNumber == 1">(1266)</span>
            <span v-else-if="spanNumber == 2">(2352)</span>
            <span v-else>(123511)</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            list: [
                {
                    id: 1,
                    name: "一句诗句",
                    text: "poetry"
                },
                {
                    id: 2,
                    name: "励志句子",
                    text: "sentence"
                },
                {
                    id: 3,
                    name: "毒鸡汤",
                    text: "chickensoup"
                }
            ],
            spanNumber: null
        }
    },
    mounted() {
        console.log(window.location.href);
        let str = window.location.href;
        let index = window.location.href.lastIndexOf("/");
        str = str.slice(index+1)
        // console.log(str);
        let number;
        for(let i = 0; i < this.list.length; i++){
            if(this.list[i].text === str){
                number = this.list[i].id
            }
        }
        this.spanNumber = number;
    }
}
</script>

<style scoped>
.top-cpn{
    /* outline: 2px solid red; */
    width: 1000px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    line-height: 80px;
}
.liked{
    width: 120px;
    cursor: pointer;
}
</style>